<template>
  <h1 :style="stylesConfig" class="compo-public-style">
    {{ setupData.componentContent || mockData }}
  </h1>
</template>

<script setup>
import { computed, toRefs } from 'vue';
const mockData = '大标题';

const props = defineProps({
  value: {
    type: Object,
    default: () => {}
  },
  preview: {
    type: Boolean,
    default: () => false
  }
});

const { styles } = toRefs(props.value);

const stylesConfig = computed(() => {
  return {
    // ...props.value.styles,
    width: `${styles.value?.w / 100}rem`,
    height: `${styles.value?.h / 100}rem`,
    textAlign: styles.value?.textAlign,
    lineHeight: `${styles.value?.h / 100}rem`,
    fontSize: `${styles.value?.textFontsize / 100}rem`,
    position: props.preview ? 'absolute' : 'static',
    left: `${styles.value?.x}px`,
    top: `${styles.value?.y}px`,
    color: `${styles.value?.textColor}`,
    borderRadius: `${styles.value.leftTop / 100}rem ${
      styles.value.rightTop / 100
    }rem ${styles.value.rightBottom / 100}rem ${
      styles.value.leftBottom / 100
    }rem`,

    margin: 0
  };
});
const setupData = computed(() => {
  return {
    ...props.value.setups
  };
});
// const initData = computed(() => {
//     return {
//         ...props.value.data
//     };
// });
</script>
<style scoped lang="scss">
h1 {
  background: transparent;
}
</style>
